<template>
	<div class="fill_order">
		<div class="fill_order_title">
			<van-icon name="arrow-left" size="22px" style="position: absolute;left: 5px;" @click="back" />
			<p>填写订单</p>
		</div>
		<!-- 地址 -->
		<div class="fill_order_address">
			<van-cell :title="address.receiver+'    '+address.contact  " icon="location-o" :label="address.fullLocation"
				is-link />
		</div>
		<!-- 商品 -->
		<div class="fill_order_goods_info">

			<div class="goods" v-for="item in goods_info">
				<div class="goods_img">
					<img :src="item.goods[0].picture" alt="" />
				</div>

				<div class="goods_detail">
					<div class="goods_title">
						<p>{{item.goods[0].name}}</p>
					</div>

					<div class="goods_desc">
						<p>{{item.goods[0].attrsText}}</p>
					</div>

					<div class="goods_price">
						<p>￥{{item.goods[0].price}}</p>

					</div>
					<div class="goods_num">
						<p>x{{item.goods[0].count}}</p>

					</div>

				</div>
			</div>




		</div>
		<!-- 时间和备注 -->
		<div class="fill_order_time">
			<van-cell title="配送时间" is-link @click="showPicker = true" :value="time" />

			<van-popup v-model="showPicker" round position="bottom">
				<van-picker show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
			</van-popup>

			<van-field v-model="remark" label="订单备注" placeholder="建议留言前先与商家沟通确认" input-align="right" />

		</div>
		<!-- 总价 -->
		<div class="fill_order_price">
			<van-cell title="商品总价" v-model="total_price" />
			<van-cell title="运费" v-model="postFee" />
		</div>

		<!-- 底部 -->
		<div class="fill_order_submit">
			<div class="fill_order_submit_price">
				<p>{{pay_all_price}}</p>
			</div>

			<div class="fill_order_submit_button">
				<button @click="submit">提交订单</button>
			</div>
		</div>
	</div>
</template>

<script>
	import request from '../../api/request.js'
	export default {
		name: 'fill_order',
		data() {
			return {
				router_payload: [],
				goods_info: [],
				default_address_id: '',
				remark: '',
				total_price: 0,
				postFee: 0,
				address_list: [],
				address: {},
				pay_all_price: 0,
				time: '时间不限(周一至周日)',
				showPicker: false,
				columns: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
			}
		},
		async mounted() {
			this.router_payload = JSON.parse(this.$route.query.item)

			await this.get_order_info()
			this.count_price()
		},
		methods: {
			back() {
				this.$router.back()
				
				

			},
			async get_order_info() {

				if (Array.isArray(this.router_payload)) {
					for (var i in this.router_payload) {
						let res = await request({
							url: `/member/order/pre/now?skuId=${this.router_payload[i].skuId}&count=${this.router_payload[i].count}`,
							method: 'get',
							headers: {
								Authorization: localStorage.getItem('token')
							}

						})
						this.goods_info.push(res.result)
						this.address_list = res.result.userAddresses

					}
					this.address = this.address_list[0]

				} else {
					let res = await request({
						url: `/member/order/pre/now?skuId=${this.router_payload.sku.id}&count=${this.router_payload.num}`,
						method: 'get',
						headers: {
							Authorization: localStorage.getItem('token')
						}

					})
					this.goods_info.push(res.result)
					this.address_list = res.result.userAddresses
					if (this.$route.query.addressId) {
						for (var i in this.address_list) {
							if (this.address_list[i].id === this.$route.query.addressId) {
								this.address = this.address_list[i]
							}
						}
					}
				}
			},
			// 计算价格
			count_price() {
				for (var i in this.goods_info) {
					this.total_price += this.goods_info[i].summary.totalPrice
					this.postFee += this.goods_info[i].summary.postFee
				}
				this.pay_all_price = this.total_price + this.postFee
				this.total_price = '￥' + this.total_price
				this.postFee = '￥' + this.postFee
				this.pay_all_price = '￥' + this.pay_all_price
			},
			// 选择配送时间
			onConfirm(value) {
				this.time = value;
				this.showPicker = false;
			},
		async	submit() {
				let goods=[]
				for(var i in this.goods_info){
					let item={
						skuId:this.goods_info[i].goods[0].skuId,
						count:this.goods_info[i].goods[0].count
					}
					goods.push(item)
				}
				let data={
					"goods":goods,
					"addressId":this.address.id ,
					"deliveryTimeType": 1,
					"buyerMessage": this.remark,
					"payType": 1,
					"payChannel": 1
				}
				let res = await request({
					url: '/member/order',
					method: 'post',
					headers: {
						Authorization: localStorage.getItem('token')
					},
					data:data
				
				})
				let id=res.result.id
				
				this.$router.push({
					name:'pay',
					query:{
						id
					}
				})

			}
		},


	}
</script>

<style lang="scss">
	.fill_order {
		width: 100%;
		height: 100%;
		padding: 15px;
		box-sizing: border-box;
		background-color: #F4F4F4;

		.fill_order_title {
			width: 100%;
			height: 6%;

			background-color: #F8F8F8;
			display: flex;
			justify-content: center;
			align-items: center;

			p {
				font-size: 30px;

			}
		}

		.fill_order_address {
			width: 100%;
			height: 8%;
			margin: 20px 0;
			background-color: #FFFFFF;
			border-radius: 10px;
		}

		.fill_order_goods_info {
			margin: 20px 0;
			display: flex;
			flex-wrap: wrap;
			box-sizing: border-box;
			width: 100%;
			height: auto;

			.goods {
				width: 100%;
				height: 220px;
				background-color: #FFFFFF;
				display: flex;
				margin-bottom: 10px;
				border-radius: 10px;
				box-sizing: border-box;

				.goods_img {
					width: 30%;
					height: 100%;

					display: flex;
					justify-content: center;
					align-items: center;

					img {
						width: 80%;
						height: 80%;
					}
				}

				.goods_detail {
					width: 60%;
					height: 100%;
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					align-items: flex-start;

					.goods_title {

						width: 100%;
						height: 40%;
						display: flex;
						justify-content: flex-start;
						align-items: center;

						p {
							font-size: 26px;
							padding: 0 10px;
							box-sizing: border-box;
						}
					}

					.goods_desc {
						width: 90%;
						height: 40%;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						box-sizing: border-box;

						p {
							font-size: 24px;
							padding: 0 10px;
							background-color: #F7F7F7;
							color: #8E8E8E;
						}
					}

					.goods_price {
						width: 50%;
						height: 20%;
						display: flex;
						padding-left: 20px;
						box-sizing: border-box;
						justify-content: flex-start;
						align-items: center;

						p {
							font-size: 26px;
							color: #AA535C;
						}

					}

					.goods_num {
						width: 50%;
						height: 20%;
						display: flex;
						padding-left: 20px;
						box-sizing: border-box;
						justify-content: flex-end;
						align-items: center;

						p {
							font-size: 26px;
							color: #444444;
						}

					}


				}
			}
		}

		.fill_order_time {
			margin-top: 20px;
			margin-bottom: 30px;
			width: 100%;
			height: 10%;
			background-color: #FFFFFF;
			border-radius: 10px;
		}

		.fill_order_price {
			margin-top: 20px;
			margin-bottom: 30px;
			width: 100%;
			height: 10%;
			background-color: #FFFFFF;
			border-radius: 10px;

			.van-cell__value {
				color: black;
			}
		}

		.fill_order_submit {
			position: fixed;
			z-index: 999;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 6%;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #FFFFFF;

			.fill_order_submit_price {
				width: 70%;
				height: 100%;

				p {
					font-size: 35px;
					color: #A85A48;
				}
			}

			.fill_order_submit_button {
				width: 30%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;

				button {
					color: white;
					width: 90%;
					height: 80%;
					border: none;
					border-radius: 100px;
					background-color: #5AB79C;
				}
			}


		}

	}
</style>